(function($) {
    $.fn.tableResize = function(opts) {
        opts = $.extend({
        	store: window.store,
            minWidth: 20
        }, opts);

        function resizeBox(table, indexOfTable) {
            var thGroup;
            var resizeItem;
            var storeObj = {};
            var pathName = location.pathname + '_' + indexOfTable;
            var tableHeight = table.height();
            var thisTableWidth = 0;
            return {
                create: function() {
                    var style = '<style>.tb-resize-th{position: relative;}';
                    style += '.tb-resize-curser{position: absolute;right: 0;top: 0;z-index: 1;height: 100%;width: 5px;cursor: ew-resize;}';
                    style += '.tb-resize-curser{ position: absolute; right: 0; top: 0; z-index: 1; height: 100%; width: 5px;cursor: ew-resize;}.tb-resize-start{ background-color: #89C5FF;}'
                    style += '</style>';
                    $(style).appendTo('head');
                    if(opts.store){
                        storeObj = opts.store.get(pathName) || {};
                    }
                    thGroup = table.find('th').addClass('tb-resize-th').each(function(e) {
                        var me = $(this);

                        if(storeObj[e]){
                            me.width(storeObj[e]);
                            thisTableWidth += storeObj[e];
                        } else {
                            me.width(me.outerWidth(false));
                            storeObj[e] = me.outerWidth(false);
                            thisTableWidth += me.outerWidth(false);
                        }
                        me.append('<i class="tb-resize-curser" style="height: '+tableHeight+'px"></i>');
                    });
                    resizeItem = thGroup.find('.tb-resize-curser');
                    table.width(thisTableWidth);
                },
                bind: function() {
                    function Move(lit, part) {
                        var index = part.index();
                        var thisWidth = 0;
                        var Drag = {
                            o: null,
                            init: function(o) {
                                o.onmousedown = this.start;
                            },
                            start: function(e) {
                                var o;
                                thisWidth = part.width();
                                lit.addClass('tb-resize-start');
                                e = Drag.fixEvent(e);
                                e.preventDefault && e.preventDefault();
                                Drag.o = o = this;
                                table.addClass('tb-resize-down');
                                o.x = e.clientX - Drag.o.offsetLeft;
                                document.onmousemove = Drag.move;
                                document.onmouseup = Drag.end;

                            },
                            move: function(e) {
                                e = Drag.fixEvent(e);
                                var oLeft;
                                oLeft = e.clientX - Drag.o.x - 12;
                                oLeft = oLeft > opts.minWidth ? oLeft : opts.minWidth;
                                //thisTableWidth = thisTableWidth - (thisWidth - oLeft);
                                this.setLeft = oLeft;
                                lit.css({
                                    left: oLeft + 12
                                })
                                storeObj[index] = oLeft;
                                
                                return false;
                            },
                            end: function(e) {
                                e = Drag.fixEvent(e);
                                table.removeClass('tb-resize-down');
                                lit.removeClass('tb-resize-start');
                                Drag.o = document.onmousemove = document.onmouseup = null;
                                if(opts.store){
                                    saveStore();
                                }
                                lit.css('left','');
                                 part.css({
                                    width: this.setLeft
                                });
                                table.width(getTableWidth());
                            },
                            fixEvent: function(e) {
                                if (!e) {
                                    e = window.event;
                                    e.target = e.srcElement;
                                    e.layerX = e.offsetX;
                                }
                                return e;
                            }
                            
                        };
                        Drag.init(lit[0]);

                        function  getTableWidth(){
                            var width = 0;
                            for(var i in storeObj){
                                if(storeObj.hasOwnProperty(i)) width += storeObj[i];
                            }
                            return width;
                        }

                        function saveStore(){

                            opts.store.set(pathName, storeObj);
                        }
                    }

                    resizeItem.each(function() {
                        var me = $(this);
                        var th = me.closest('th');
                        var newMove = new Move(me, th);
                    });

                },
                init: function() {
                    this.create();
                    this.bind();
                }
            };
        }

        return this.each(function(e) {
            var Box = new resizeBox($(this), e);
            Box.init();
        });
    };
})(jQuery);

$('table').tableResize()